import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    TextInput,
    StatusBar
} from 'react-native';
import ButtonComponent from "../../common/ButtonComponent";

const {height, width} = Dimensions.get('window');
export default class RegistrationVerificationPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            verificationCode:'',
            nickname:''
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="white"
                    barStyle="dark-content"
                />
                <TouchableOpacity style={styles.goBackView}>
                    <Image
                        source={require('../../img/goBack.png')}
                        style={styles.goBackImg}/>
                </TouchableOpacity>
                <View style={styles.topTitle}>
                    <Text style={styles.topTitleMsg}>手机号登录</Text>
                </View>
                <View style={styles.passwordAndNicknameView}>
                    <View style={styles.areaView}>
                        <Text style={styles.areaMsg}>手机号</Text>
                        <View style={styles.phoneView}>
                            <Text style={styles.phoneMsg}>+86 186 6803 3070</Text>
                        </View>
                    </View>
                    <View style={styles.topTextInputView}>
                        <Text style={styles.TextInputTitleMsg}>验证码</Text>
                        <TextInput
                            ref={ (ref)=>this.topTextInput = ref }
                            autoCapitalize={"none"}
                            defaultValue={this.state.verificationCode}
                            placeholder="请输入验证码"
                            placeholderTextColor='#bababa'
                            underlineColorAndroid={'transparent'}
                            autoCorrect={false}
                            secureTextEntry={true}
                            style={styles.textInputView}
                            onChangeText={(text)=>{
                                this.setState({
                                    verificationCode:text,
                                })
                            }}/>
                        <View style={styles.verificationCodeView}>
                            <ButtonComponent borderColor={{borderColor:'#000000'}}
                                             timerCount = {10}
                                             textColor ={{color:'#000000'}}
                                             onClick = {(shouldStart) =>{
                                                 this._GetVerification(shouldStart);}}/>
                        </View>
                    </View>
                    <View style={styles.topTextInputView}>
                        <Text style={styles.TextInputTitleMsg}>昵称</Text>
                        <TextInput
                            ref={ (ref)=>this.bottomTextInput = ref }
                            autoCapitalize={"none"}
                            defaultValue={this.state.nickname}
                            placeholder="请输入昵称"
                            placeholderTextColor='#bababa'
                            underlineColorAndroid={'transparent'}
                            autoCorrect={false}
                            style={styles.textInputView}
                            onChangeText={(text)=>{
                                this.setState({
                                    nickname:text,
                                })
                            }}/>
                    </View>
                </View>
                <TouchableOpacity style={styles.ButView}>
                    <Text style={styles.ButMsg}>用密码登录</Text>
                </TouchableOpacity>
                <View style={styles.loginView}>
                    <TouchableOpacity style={styles.loginButView}>
                        <Text style={styles.loginButMsg}>登录</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff'
    },
    goBackView:{
        position: 'absolute',
        left: 15,top:35
    },
    goBackMsg:{
        fontSize:16,
        color:'#3090dd',
        textAlign:'center'
    },
    topTitle: {
        marginTop: 109,
        justifyContent: 'center',
        alignItems: 'center',
    },
    topTitleMsg: {
        fontSize: 20,
        color: '#000000'
    },
    passwordAndNicknameView:{
        marginTop: 24,
        marginLeft: 30
    },
    areaView: {
        width: width - 60,
        flexDirection: 'row',
        alignItems: 'center',
        height: 40,
        borderColor: '#bababa',
        borderBottomWidth: 0.5
    },
    areaMsg: {
        fontSize: 15,
        color: '#000000'
    },
    phoneView:{
        position: 'absolute',
        left: 105,
        height: 40,
        width: width - 165,
        justifyContent:'center',
    },
    phoneMsg:{
        fontSize:15,
        color:'#000000',
    },
    topTextInputView:{
        width:width-60,
        flexDirection:'row',
        alignItems:'center',
        height:40,
        borderColor:'#bababa',
        borderBottomWidth:1
    },
    TextInputTitleMsg:{
        fontSize:15,
        color:'#000000'
    },
    textInputView: {
        position: 'absolute',
        left: 105,
        height: 40,
        width: width - 165,
        fontSize: 15
    },
    loginView:{
        marginTop:39,
        justifyContent:'center',
        alignItems:'center'
    },
    loginButView:{
        width:width-60,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'#69a9dd',
        borderRadius:5,
        height:44
    },
    loginButMsg:{
        color:'#ffffff',
        textAlign:'center',
        fontSize:17
    },
    ButMsg:{
        fontSize:13,
        color:'#3090dd'
    },
    ButView:{
        marginLeft:30,
        marginTop:28
    },
    verificationCodeView:{
        position: 'absolute',
        right:0,
        alignItems:'center',
        justifyContent:'center',
        height:40
    }
});
